<template>
  <div>
    <el-scrollbar style="margin-top: -20px">
      <div class="info">
        <el-row class="content">
          <span class="title">实训信息</span>
        </el-row>
        <el-row class="content">
          <el-col :span="6">
            <span>实训教室：{{ ruleForm.classroomName }} </span>
          </el-col>
          <el-col :span="6">
            <span>实训装置：{{ ruleForm.deviceName }} </span>
          </el-col>
          <el-col :span="12">
            <span
              >实训名称：{{
                ruleForm.experimentNames != undefined
                  ? ruleForm.experimentNames.toString()
                  : ""
              }}
            </span>
          </el-col>
        </el-row>
        <el-row class="content">
          <el-col :span="6">
            <span> 实训开始时间：{{ ruleForm.startTime }} </span>
          </el-col>
          <el-col :span="6">
            <span> 实训结束时间：{{ ruleForm.endTime }} </span>
          </el-col>
          <el-col :span="6">
            <span
              >实训用时：{{ $common.toDduration(ruleForm.experimentTime) }}
            </span>
          </el-col>
        </el-row>
      </div>

      <div class="info">
        <el-row class="content">
          <span class="title">实训人信息</span>
        </el-row>
        <el-row class="content">
          <el-col :span="6">
            <span>
              {{
                (ruleForm.type == 0 ? "学生学号：" : "老师工号：") +
                ruleForm.studentCode
              }}
            </span>
          </el-col>
          <el-col :span="6">
            <span>
              {{
                (ruleForm.type == 0 ? "学生姓名：" : "老师姓名：") +
                ruleForm.studentName
              }}
            </span>
          </el-col>
        </el-row>
      </div>

      <div v-for="(item, index) in ruleForm.reportDataList" :key="index">
        <div class="info">
          <el-row class="content">
            <span class="title">{{ item.name }}-折线图</span>
          </el-row>
          <el-row class="content">
            <el-col :span="24">
              <div class="flexc">
                <div :id="'Line' + index" class="LineOne" ref="LineOne"></div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="info" v-if="item.reportPointData.sheetData">
          <el-row class="content">
            <span class="title">{{ item.name }}-表格</span>
            <el-button class="btn" @click="handleExport(item.id)"
              >导出</el-button
            >
          </el-row>
          <el-row class="content">
            <el-col :span="24">
              <div class="flexc">
                <el-table
                  :data="item.reportPointData.sheetData.dataLists"
                  style="width: 100%"
                  class="data-table"
                  height="300"
                  v-loading="isloading"
                >
                  <el-table-column
                    type="index"
                    label="序号"
                    width="60"
                    align="center"
                    fixed="left"
                  ></el-table-column>
                  <el-table-column
                    v-for="(item2, index2) in item.reportPointData.sheetData
                      .titleList"
                    :key="index2"
                    show-overflow-tooltip
                    :label="item2"
                    width
                    min-width="180"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <div>{{ scope.row[index2] }}</div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script type="text/ecmascript-6">
import * as echarts from "echarts";
import {
  getDataDeviceExperimentReport,
  exportDataDeviceExperimentData,
} from "@/api/statistic";

export default {
  components: {},
  props: {
    addEditId: {
      type: String,
      default: "",
    },
    addEditIsDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      ruleForm: {
        reportDataList: [],
      },
      rules: {},
      isloading: false,
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    // 详情
    getDetail() {
      getDataDeviceExperimentReport({ id: this.addEditId }).then((res) => {
        if (res.code == 200) {
          this.ruleForm = res.data;

          setTimeout(() => {
            if (this.ruleForm.reportDataList) {
              for (let i = 0; i < this.ruleForm.reportDataList.length; i++) {
                this.initLineData(
                  this.ruleForm.reportDataList[i].reportPointData,
                  "Line" + i
                );
              }
            }
          }, 500);
        }
      });
    },
    // 取消
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$parent.closeAddEdit();
    },
    // 初始化折线数据
    initLineData(val, id) {
      let xDataList = val.xdata;
      let yDataList = [];
      let yTitleList = [];

      // 遍历获取数据
      val.pointDataLists.forEach((value) => {
        let code = value.code;
        yDataList.push({
          name: code,
          type: "line",
          smooth: true,
          data: value.dataList,
        });
        yTitleList.push(code);
      });

      const chartDom = document.getElementById(id);
      const myChart = echarts.init(chartDom);
      let option;
      option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          type: "scroll",
          width: "80%",
          data: yTitleList,
        },
        grid: {
          left: "3%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
            left: 20,
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xDataList,
        },
        yAxis: {
          type: "value",
        },
        series: yDataList,
      };

      option && myChart.setOption(option);
    },
    // 处理字符串
    dealStr(str, num) {
      if (str && str.length > num) {
        str = str.slice(0, num) + "...";
      }

      return str;
    },
    // 导出
    handleExport(deviceExperimentId) {
      exportDataDeviceExperimentData({
        dataDeviceExperimentId: this.addEditId,
        deviceExperimentId: deviceExperimentId,
      }).then((res) => {
        if (res.code == 200) {
          window.open(res.data);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.info {
  border-top: solid 20px #f2f2f2;
  padding: 20px;
}

.title {
  font-size: 22px;
  font-weight: bold;
}

.btn {
  float: right;
}

.content {
  margin-bottom: 20px;
}

.chartClass {
  position: relative;
  top: 20px;
}

.flexc {
  display: flex;
  align-items: center;
  justify-content: center;
}

.LineOne {
  width: 95%;
  height: 400px;
}
</style>
